<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    section {
      height: 3000px;
      width: 1200px;
      margin: 0 auto;
      background-color: pink;
    }

    div {
      width: 46px;
      height: 46px;
      font-size: 20px;
      /* 半透明 */
      background-color: rgba(0, 0, 0, 0.3);
      /* 固定定位 */
      position: fixed;
      /* 靠右边 0px */
      right: 0px;
      /* 靠底部 40px */
      bottom: 40px;
      /* 鼠标小手 */
      cursor: pointer;
      /* df */
      display: flex;
      /* jcc */
      justify-content: center;
      /* aic */
      align-items: center;
    }
  </style>
</head>

<body>
  <section>页面盒子</section>
  <div>⬆️</div>
  <script>
    /* 
      需求分析：
        1. 查找返回顶部的盒子
        2. 添加点击事件
        3. 实现返回顶部
    */

    // 查找返回顶部的盒子
    let div = document.querySelector('div')
    // 给返回顶部盒子添加点击事件
    div.addEventListener('click', function () {
      // window     窗口(浏览器)
      // scroll     滚动
      // to         到
      // top        顶部
      // behavior   (滚动)行为
      // smooth     平滑
      window.scrollTo({ top: 0, behavior: "smooth" })
    })
  </script>
</body>

</html>